<template>
  <div>
    <div class="back flex">
      <img @click="$router.push('/')" src="../assets/back.png" alt="" />

      <div class="pin">频道管理</div>
    </div>

    <div style="padding: 10px">点击删除以下频道</div>

    <div class="list">
      <div
        @click="decrement(index)"
        class="item"
        v-for="(item, index) in myChannel"
        :key="index"
      >
        {{ item }}
      </div>
    </div>

    <div style="padding: 10px">点击添加以下频道</div>

    <div class="list">
      <div
        @click="increment(index)"
        class="item"
        v-for="(item, index) in allChannel"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "channelManage",

  computed: {
    myChannel() {
      return this.$store.state.myChannel;
    },

    // 返回所有的频道信息

    allChannel() {
      return this.$store.state.allChannel;
    },
  },

  methods: {
    increment(index) {
      this.$store.dispatch("increment", index);
    },

    decrement(index) {
      this.$store.dispatch("decrement", index);
    },
  },
};
</script>

<style scoped lang='scss'>
.back {
  height: 2.4rem;

  width: 100%;

  background: #d43d3d;

  color: #fff;

  text-align: center;

  line-height: 2.4rem;

  img {
    position: absolute;
    left: 0;
    height: 1.5rem;
    width: 1.5rem;
    margin: 8px 0;
  }

  .pin {
    margin: 0 auto;
  }
}

.list {
  padding: 10px;

  display: flex;

  flex-wrap: wrap;

  .item {
    border: 1px solid #ccc;

    padding: 2px 10px;

    margin: 5px 10px;
  }
}
</style>